<template>
  <div class="m-content">
    <div class="m-content-table">
      <Table :columns="columns" :data="unitData" :loading="loading"></Table>
    </div>
    <div class="m-content-page">
      <Page
        :total="unitLen"
        :page-size="pageSize"
        :page-size-opts="[5, 10, 15]"
        :show-sizer="true"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
    <div class="m-content-Button">
      <Button type="primary" @click="addUnit">新增</Button>
    </div>

    <AddUnit :showModal="addModal" @closeModal="showAdd = false" @reloadTable="reload"></AddUnit>

    <EditUnit :unit="row" :showModal="editModal" @closeModal="showEdit = false" @reloadTable="reload"></EditUnit>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import AddUnit from './handleUnit/addUnit.vue'
import EditUnit from './handleUnit/editUnit.vue'
import { columns } from './js/columns'

export default {
  inject: ['reload'],
  components: {
    AddUnit,
    EditUnit
  },
  data () {
    return {
      unitData: [],   // 商品单位数据
      unitLen: 0,   // 总数据长度
      loading: false,   // 表格是否在加载中
      pageId: 1,   // 传递给Modal的pageId
      pageSize: 5,    // 页面长度
      columns: columns(this),
      showAdd: false,   // 新增商品单位
      showEdit: false,   // 修改商品单位
      row: {}   // 选中的商品单位数据
    }
  },
  computed: {
    addModal () {
      return this.showAdd
    },
    editModal () {
      return this.showEdit
    }
  },
  mounted () {
    this._getUnit()
  },
  methods: {
    // 编辑商品单位
    editUnit (row) {
      this.row = row
      this.showEdit = true
    },
    // 删除商品单位
    deleteUnit (id) {
      this._deleteUnit(id)
      this.reload()
    },
    // 新增商品单位
    addUnit () {
      this.showAdd = true
    },
    // 切换页面
    changePage (page) {
      this._getUnit(page, this.pageSize)
    },
    // 修改每页页数
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this._getUnit(1, pageSize)
    },
    // 获取商品单位数据
    async _getUnit (pageId, pageSize) {
      this.loading = true
      const url = 'getunitdata'
      let page = pageId || 1
      let PageSize = pageSize || 5
      const res = await this.GET_DATA({
        dataUrl: url,
        pageSize: PageSize,
        pageId: page
      })
      if (res) {
        this.$nextTick(() => {
          this.unitData = res.data.unitList
          this.unitLen = res.data.size
          this.loading = false
        })
      }
    },
    // 删除商品单位接口
    async _deleteUnit (id) {
      this.loading = true
      const url = 'goods/deleteunit'
      const res = this.GET_DATA({
        dataUrl: url,
        id: id,
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
        this.loading = false
      }
    },
    ...mapActions({
      GET_DATA: 'GET_DATA'
    })
  }
}
</script>

<style lang="scss">
.m-content-table {
  margin-left: 20px;
  border: 1px solid #dcdee2;
}
.m-content-page {
  position: absolute;
  right: 0;
  margin-top: 10px;
}
.m-content-Button {
  margin-top: 15px;
  margin-left: 20px;
}
</style>